import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
import { red, green, blue, description } from "../Utils";
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";

<CommonHeader />

<Meta title="Components/ViewPort" component={ViewPort} />

## ViewPort

Top-level space that fills entire browser view port

### Full coverage

<Canvas>
	<Story name="Default">
		<ViewPort style={blue}>{description("ViewPort")}</ViewPort>
	</Story>
</Canvas>

## With offsets

Fills entire browser view port with offsets from the edge. Useful for making visible existing
window elements that may be on the page.

### With a top offset

<Canvas>
	<Story name="Top offset">
		<ViewPort style={blue} top={50}>
			{description("ViewPort with top offset")}
		</ViewPort>
	</Story>
</Canvas>

### With a right offset

<Canvas>
	<Story name="Right offset">
		<ViewPort style={blue} right={50}>
			{description("ViewPort with right offset")}
		</ViewPort>
	</Story>
</Canvas>

### With a bottom offset

<Canvas>
	<Story name="Bottom offset">
		<ViewPort style={blue} bottom={50}>
			{description("ViewPort with bottom offset")}
		</ViewPort>
	</Story>
</Canvas>

### With a left offset

<Canvas>
	<Story name="Left offset">
		<ViewPort style={blue} left={50}>
			{description("ViewPort with left offset")}
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<PropsHeader>ViewPort properties</PropsHeader>
		<Prop name="bottom" type="number | string" description="Bottom offset from viewport edge." />
		<Prop name="left" type="number | string" description="Left offset from viewport edge" />
		<Prop name="right" type="number | string" description="Right offset from viewport edge" />
		<Prop name="top" type="number | string" description="Top offset from viewport edge" />
		<StandardProps />
	</PropsTable>
</Story>